TypeScript Mapped Types: Objekttransformation und Eigenschaftenmodifikation meistern

In der sich ständig weiterentwickelnden Landschaft der Softwareentwicklung sind robuste Typsysteme von grösster Bedeutung, um wartbare, skalierbare und zuverlässige Anwendungen zu erstellen. TypeScript hat sich mit seiner leistungsstarken Typinferenz und seinen fortschrittlichen Funktionen zu einem unverzichtbaren Werkzeug für Entwickler weltweit entwickelt. Zu seinen mächtigsten Fähigkeiten gehören Mapped Types, ein ausgeklügelter Mechanismus, mit dem wir bestehende Objekttypen in neue umwandeln können. Dieser Blog-Beitrag wird tief in die Welt der TypeScript Mapped Types eintauchen und ihre grundlegenden Konzepte, praktischen Anwendungen und die Art und Weise, wie sie Entwickler in die Lage versetzen, Objektransformationen und Eigenschaftenmodifikationen elegant zu handhaben, untersuchen.

Das Kernkonzept von Mapped Types verstehen

Im Kern ist ein Mapped Type eine Möglichkeit, neue Typen zu erstellen, indem man über die Eigenschaften eines bestehenden Typs iteriert. Stellen Sie sich das wie eine Schleife für Typen vor. Für jede Eigenschaft im ursprünglichen Typ können Sie eine Transformation auf seinen Schlüssel, seinen Wert oder beides anwenden. Dies eröffnet eine Vielzahl von Möglichkeiten, neue Typdefinitionen auf der Grundlage bestehender Typen zu erstellen, ohne manuelle Wiederholung.

Die grundlegende Syntax für einen Mapped Type beinhaltet eine { [P in K]: T }-Struktur, wobei:

• P: Repräsentiert den Namen der Eigenschaft, über die iteriert wird.
• in K: Dies ist der entscheidende Teil, der angibt, dass P jeden Schlüssel vom Typ K annimmt (der typischerweise eine Vereinigung von String-Literalen oder ein Keyof-Typ ist).
• T: Definiert den Typ des Wertes für die Eigenschaft P im neuen Typ.

Beginnen wir mit einer einfachen Illustration. Stellen Sie sich vor, Sie haben ein Objekt, das Benutzerdaten darstellt, und Sie möchten einen neuen Typ erstellen, bei dem alle Eigenschaften optional sind. Dies ist ein häufiges Szenario, zum Beispiel beim Erstellen von Konfigurationsobjekten oder beim Implementieren von Teilaktualisierungen.

Beispiel 1: Alle Eigenschaften optional machen

Betrachten Sie diesen Basistyp:

            
type User = {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
};

            

              
                Copy
              
            
          

Wir können einen neuen Typ, OptionalUser, erstellen, bei dem alle diese Eigenschaften optional sind, indem wir einen Mapped Type verwenden:

            
type OptionalUser = {
  [P in keyof User]?: User[P];
};

            

              
                Copy
              
            
          

Lassen Sie uns das aufschlüsseln:

• keyof User: Dies erzeugt eine Vereinigung der Schlüssel des User-Typs (z.B. 'id' | 'name' | 'email' | 'isActive').
• P in keyof User: Dies iteriert über jeden Schlüssel in der Vereinigung.
• ?: Dies ist der Modifikator, der die Eigenschaft optional macht.
• User[P]: Dies ist ein Lookup-Typ. Für jeden Schlüssel P ruft er den entsprechenden Werttyp aus dem ursprünglichen User-Typ ab.

Der resultierende OptionalUser-Typ würde wie folgt aussehen:

            
{
  id?: number;
  name?: string;
  email?: string;
  isActive?: boolean;
}

            

              
                Copy
              
            
          

Das ist unglaublich mächtig. Anstatt jede Eigenschaft manuell mit einem ? neu zu definieren, haben wir den Typ dynamisch generiert. Dieses Prinzip kann erweitert werden, um viele andere Hilfstypen zu erstellen.

Gängige Eigenschaftenmodifikatoren in Mapped Types

Bei Mapped Types geht es nicht nur darum, Eigenschaften optional zu machen. Sie ermöglichen es Ihnen, verschiedene Modifikatoren auf die Eigenschaften des resultierenden Typs anzuwenden. Die gebräuchlichsten sind:

• Optionalität: Hinzufügen oder Entfernen des Modifikators ?.
• Readonly: Hinzufügen oder Entfernen des Modifikators readonly.
• Nullbarkeit/Nicht-Nullbarkeit: Hinzufügen oder Entfernen von | null oder | undefined.

Beispiel 2: Erstellen einer Readonly-Version eines Typs

Ähnlich wie beim optionalen Erstellen von Eigenschaften können wir einen ReadonlyUser-Typ erstellen:

            
type ReadonlyUser = {
  readonly [P in keyof User]: User[P];
};

            

              
                Copy
              
            
          

Dies erzeugt:

            
{
  readonly id: number;
  readonly name: string;
  readonly email: string;
  readonly isActive: boolean;
}

            

              
                Copy
              
            
          

Dies ist äusserst nützlich, um sicherzustellen, dass bestimmte Datenstrukturen nach ihrer Erstellung nicht mehr verändert werden können, was ein grundlegendes Prinzip für den Aufbau robuster, vorhersagbarer Systeme ist, insbesondere in nebenläufigen Umgebungen oder bei der Verwendung von unveränderlichen Datenmustern, die in funktionalen Programmierparadigmen beliebt sind, die von vielen internationalen Entwicklungsteams übernommen wurden.

Beispiel 3: Optionalität und Readonly kombinieren

Wir können Modifikatoren kombinieren. Zum Beispiel ein Typ, bei dem Eigenschaften sowohl optional als auch readonly sind:

            
type OptionalReadonlyUser = {
  readonly [P in keyof User]?: User[P];
};

            

              
                Copy
              
            
          

Dies führt zu:

            
{
  readonly id?: number;
  readonly name?: string;
  readonly email?: string;
  readonly isActive?: boolean;
}

            

              
                Copy
              
            
          

Modifikatoren mit Mapped Types entfernen

Was ist, wenn Sie einen Modifikator entfernen möchten? TypeScript erlaubt dies mit der Syntax -? und -readonly innerhalb von Mapped Types. Dies ist besonders nützlich, wenn Sie mit bestehenden Hilfstypen oder komplexen Typzusammensetzungen arbeiten.

Nehmen wir an, Sie haben einen Partial<T>-Typ (der eingebaut ist und alle Eigenschaften optional macht) und Sie möchten einen Typ erstellen, der mit Partial<T> identisch ist, aber bei dem alle Eigenschaften wieder obligatorisch sind.

            
type Mandatory<T> = {
  -?: T extends object ? T[keyof T] : never;
};

type FullyPopulatedUser = Mandatory<Partial<User>>;

            

              
                Copy
              
            
          

Das scheint kontraintuitiv. Lassen Sie uns das analysieren:

Partial<User> ist äquivalent zu unserem OptionalUser. Jetzt wollen wir seine Eigenschaften obligatorisch machen. Die Syntax -? entfernt den optionalen Modifikator.

Ein direkterer Weg, dies zu erreichen, ohne sich zuerst auf Partial zu verlassen, besteht darin, einfach den ursprünglichen Typ zu nehmen und ihn obligatorisch zu machen, wenn er optional wäre:

            
type MakeMandatory<T> = {
  -?: T;
};

type MandatoryUser = MakeMandatory<OptionalUser>;

            

              
                Copy
              
            
          

Dadurch wird OptionalUser korrekt in die ursprüngliche User-Typstruktur zurückverwandelt (alle Eigenschaften vorhanden und erforderlich).

Um den Modifikator readonly zu entfernen:

            
type Mutable<T> = {
  -readonly [P in keyof T]: T[P];
};

type MutableUser = Mutable<ReadonlyUser>;

            

              
                Copy
              
            
          

MutableUser ist äquivalent zum ursprünglichen User-Typ, aber seine Eigenschaften sind nicht readonly.

Nullbarkeit und Undefinierbarkeit

Sie können auch die Nullbarkeit steuern. Zum Beispiel, um sicherzustellen, dass alle Eigenschaften definitiv nicht nullbar sind:

            
type NonNullableValues<T> = {
  [P in keyof T]-?: NonNullable<T[P]>;
};

interface MaybeNull {
  name: string | null;
  age: number | undefined;
}

type DefiniteValues = NonNullableValues<MaybeNull>;
// type DefiniteValues = {
//   name: string;
//   age: number;
// }

            

              
                Copy
              
            
          

Hier stellt -? sicher, dass die Eigenschaften nicht optional sind, und NonNullable<T[P]> entfernt null und undefined aus dem Werttyp.

Eigenschaftsschlüssel transformieren

Mapped Types sind unglaublich vielseitig und beschränken sich nicht nur auf das Modifizieren von Werten oder Modifikatoren. Sie können auch die Schlüssel eines Objekttyps transformieren. Hier glänzen Mapped Types wirklich in komplexen Szenarien.

Beispiel 4: Eigenschaftsschlüssel mit einem Präfix versehen

Angenommen, Sie möchten einen neuen Typ erstellen, bei dem alle Eigenschaften eines bestehenden Typs ein bestimmtes Präfix haben. Dies kann für Namespaces oder zum Generieren von Variationen von Datenstrukturen nützlich sein.

            
type Prefixed<T, Prefix extends string> = {
  [P in keyof T as `${Prefix}${Capitalize<string & P>}`]: T[P];
};

type OriginalConfig = {
  timeout: number;
  retries: number;
};

type PrefixedConfig = Prefixed<OriginalConfig, 'app'>;
// type PrefixedConfig = {
//   appTimeout: number;
//   appRetries: number;
// }

            

              
                Copy
              
            
          

Lassen Sie uns die Schlüsseltransformation aufschlüsseln:

• P in keyof T: Iteriert weiterhin über die ursprünglichen Schlüssel.
• as `${Prefix}${Capitalize<string & P>}`: Dies ist die Schlüssel-Remapping-Klausel.
• `${Prefix}${...}`: Dies verwendet Template-Literal-Typen, um den neuen Schlüsselnamen zu erstellen, indem das bereitgestellte Prefix mit dem transformierten Eigenschaftsnamen verkettet wird.
• Capitalize<string & P>: Dies ist ein gängiges Muster, um sicherzustellen, dass der Eigenschaftsname P als String behandelt und dann grossgeschrieben wird. Wir verwenden string & P, um P mit string zu schneiden, um sicherzustellen, dass TypeScript ihn als String-Typ behandelt, was für Capitalize erforderlich ist.

Dieses Beispiel demonstriert, wie Sie Eigenschaften basierend auf bestehenden Eigenschaften dynamisch umbenennen können, eine leistungsstarke Technik, um die Konsistenz zwischen verschiedenen Schichten einer Anwendung aufrechtzuerhalten oder bei der Integration mit externen Systemen, die bestimmte Namenskonventionen haben.

Beispiel 5: Eigenschaften filtern

Was ist, wenn Sie nur Eigenschaften einbeziehen möchten, die eine bestimmte Bedingung erfüllen? Dies kann erreicht werden, indem Mapped Types mit Conditional Types und der as-Klausel für das Schlüssel-Remapping kombiniert werden, oft um Eigenschaften herauszufiltern.

            
type OnlyStrings<T> = {
  [P in keyof T as T[P] extends string ? P : never]: T[P];
};

interface MixedData {
  name: string;
  age: number;
  city: string;
  isActive: boolean;
}

type StringOnlyData = OnlyStrings<MixedData>;
// type StringOnlyData = {
//   name: string;
//   city: string;
// }

            

              
                Copy
              
            
          

In diesem Fall:

• T[P] extends string ? P : never: Für jede Eigenschaft P prüfen wir, ob ihr Werttyp (T[P]) string zuweisbar ist.
• Wenn es sich um einen String handelt, wird der Schlüssel P beibehalten.
• Wenn es kein String ist, wird er never zugeordnet. Wenn ein Schlüssel never zugeordnet wird, wird er effektiv aus dem resultierenden Objekttyp entfernt.

Diese Technik ist von unschätzbarem Wert, um spezifischere Typen aus breiteren Typen zu erstellen, z. B. um nur die Konfigurationseinstellungen zu extrahieren, die von einem bestimmten Typ sind, oder um Datenfelder nach ihrer Art zu trennen.

Beispiel 6: Schlüssel in eine andere Form transformieren

Sie können Schlüssel auch in völlig andere Arten von Schlüsseln transformieren, z. B. indem Sie String-Schlüssel in Zahlen umwandeln oder umgekehrt, obwohl dies weniger häufig für die direkte Objektmanipulation und mehr für die fortgeschrittene Programmierung auf Typebene vorkommt.

Betrachten Sie, wie Sie String-Schlüssel in eine Vereinigung von String-Literalen umwandeln und diese dann als Grundlage für einen neuen Typ verwenden. Dies transformiert zwar nicht direkt die Schlüssel eines Objekts *innerhalb* des Mapped Type selbst auf diese spezielle Weise, zeigt aber, wie Schlüssel manipuliert werden können.

Ein direkteres Beispiel für die Schlüsseltransformation könnte die Zuordnung von Schlüsseln zu ihren grossgeschriebenen Versionen sein:

            
type UppercaseKeys<T> = {
  [P in keyof T as Uppercase<string & P>]: T[P];
};

type LowercaseData = {
  firstName: string;
  lastName: string;
};

type UppercaseData = UppercaseKeys<LowercaseData>;
// type UppercaseData = {
//   FIRSTNAME: string;
//   LASTNAME: string;
// }

            

              
                Copy
              
            
          

Dies verwendet die as-Klausel, um jeden Schlüssel P in sein grossgeschriebenes Äquivalent zu transformieren.

Praktische Anwendungen und reale Szenarien

Mapped Types sind nicht nur theoretische Konstrukte; sie haben erhebliche praktische Auswirkungen in verschiedenen Entwicklungsbereichen. Hier sind einige gängige Szenarien, in denen sie von unschätzbarem Wert sind:

1. Erstellen wiederverwendbarer Hilfstypen

Viele gängige Typumwandlungen können in wiederverwendbare Hilfstypen gekapselt werden. Die Standardbibliothek von TypeScript bietet bereits hervorragende Beispiele wie Partial<T>, Readonly<T>, Record<K, T> und Pick<T, K>. Sie können Ihre eigenen benutzerdefinierten Hilfstypen mit Mapped Types definieren, um Ihren Entwicklungs-Workflow zu optimieren.

Zum Beispiel ein Typ, der alle Eigenschaften Funktionen zuordnet, die den ursprünglichen Wert akzeptieren und einen neuen Wert zurückgeben:

            
type Mappers<T> = {
  [P in keyof T]: (value: T[P]) => T[P];
};

interface ProductInfo {
  name: string;
  price: number;
}

type ProductMappers = Mappers<ProductInfo>;
// type ProductMappers = {
//   name: (value: string) => string;
//   price: (value: number) => number;
// }

            

              
                Copy
              
            
          

2. Dynamische Formularverarbeitung und -validierung

In der Frontend-Entwicklung, insbesondere mit Frameworks wie React oder Angular (obwohl die Beispiele hier reines TypeScript sind), ist die Verarbeitung von Formularen und ihren Validierungszuständen eine häufige Aufgabe. Mapped Types können helfen, den Validierungsstatus jedes Formularfelds zu verwalten.

Betrachten Sie ein Formular mit Feldern, die 'pristine', 'touched', 'valid' oder 'invalid' sein können.

            
type FormFieldState = 'pristine' | 'touched' | 'dirty' | 'valid' | 'invalid';

type FormState<T> = {
  [P in keyof T]: FormFieldState;
};

interface UserForm {
  username: string;
  email: string;
  password: string;
}

type UserFormState = FormState<UserForm>;
// type UserFormState = {
//   username: FormFieldState;
//   email: FormFieldState;
//   password: FormFieldState;
// }

            

              
                Copy
              
            
          

Dadurch können Sie einen Typ erstellen, der die Datenstruktur Ihres Formulars widerspiegelt, aber stattdessen den Zustand jedes Felds verfolgt, um Konsistenz und Typsicherheit für Ihre Formularverwaltungslogik zu gewährleisten. Dies ist besonders vorteilhaft für internationale Projekte, bei denen unterschiedliche UI/UX-Anforderungen zu komplexen Formularzuständen führen können.

3. API-Antworttransformation

Bei der Arbeit mit APIs stimmen die Antwortdaten möglicherweise nicht immer perfekt mit Ihren internen Domänenmodellen überein. Mapped Types können bei der Transformation von API-Antworten in die gewünschte Form helfen.

Stellen Sie sich eine API-Antwort vor, die snake_case für Schlüssel verwendet, Ihre Anwendung aber camelCase bevorzugt:

            
// Angenommen, dies ist der eingehende API-Antworttyp
type ApiUserData = {
  user_id: number;
  first_name: string;
  last_name: string;
};

// Hilfsprogramm zum Konvertieren von snake_case in camelCase für Schlüssel
type ToCamelCase<S extends string>: string = S extends `${infer T}_${infer U}`
  ? `${T}${Capitalize<U>}`
  : S;

type CamelCasedKeys<T> = {
  [P in keyof T as ToCamelCase<string & P>]: T[P];
};

type AppUserData = CamelCasedKeys<ApiUserData>;
// type AppUserData = {
//   userId: number;
//   firstName: string;
//   lastName: string;
// }

            

              
                Copy
              
            
          

Dies ist ein fortgeschritteneres Beispiel, das einen rekursiven bedingten Typ für die Stringmanipulation verwendet. Die wichtigste Erkenntnis ist, dass Mapped Types in Kombination mit anderen fortgeschrittenen TypeScript-Funktionen komplexe Datentransformationen automatisieren, Entwicklungszeit sparen und das Risiko von Laufzeitfehlern reduzieren können. Dies ist entscheidend für globale Teams, die mit verschiedenen Backend-Diensten arbeiten.

4. Verbessern von Enum-ähnlichen Strukturen

Obwohl TypeScript `enum`s hat, möchten Sie manchmal mehr Flexibilität oder Typen von Objektliteralen ableiten, die sich wie Enums verhalten.

            
const AppPermissions = {
  READ: 'read',
  WRITE: 'write',
  DELETE: 'delete',
  ADMIN: 'admin',
} as const;

type Permission = typeof AppPermissions[keyof typeof AppPermissions];
// type Permission = 'read' | 'write' | 'delete' | 'admin'

type UserPermissions = {
  [P in Permission]?: boolean;
};

type RolePermissions = {
  [P in Permission]: boolean;
};

const userPerms: UserPermissions = {
  read: true,
};

const adminRole: RolePermissions = {
  read: true,
  write: true,
  delete: true,
  admin: true,
};

            

              
                Copy
              
            
          

Hier leiten wir zuerst einen Vereinigungstyp aller möglichen Berechtigungs-Strings ab. Dann verwenden wir Mapped Types, um Typen zu erstellen, bei denen jede Berechtigung ein Schlüssel ist, sodass wir angeben können, ob ein Benutzer diese Berechtigung hat (optional) oder ob eine Rolle dies vorschreibt (erforderlich). Dieses Muster ist in Autorisierungssystemen weltweit üblich.

Herausforderungen und Überlegungen

Obwohl Mapped Types unglaublich leistungsstark sind, ist es wichtig, sich der potenziellen Komplexität bewusst zu sein:

• Lesbarkeit und Komplexität: Übermässig komplexe Mapped Types können schwer zu lesen und zu verstehen sein, insbesondere für Entwickler, die mit diesen fortgeschrittenen Funktionen noch nicht vertraut sind. Streben Sie immer nach Klarheit und erwägen Sie, Kommentare hinzuzufügen oder komplexe Transformationen aufzuschlüsseln.
• Leistungsauswirkungen: Obwohl die Typüberprüfung von TypeScript zur Kompilierzeit erfolgt, können extrem komplexe Typmanipulationen theoretisch die Kompilierzeiten geringfügig erhöhen. Für die meisten Anwendungen ist dies vernachlässigbar, aber es ist ein Punkt, den Sie bei sehr grossen Codebasen oder hochleistungsrelevanten Build-Prozessen beachten sollten.
• Debugging: Wenn ein Mapped Type ein unerwartetes Ergebnis liefert, kann das Debuggen manchmal eine Herausforderung sein. Die Verwendung des TypeScript Playground oder der Typinspektionsfunktionen der IDE ist entscheidend, um zu verstehen, wie Typen aufgelöst werden.
• Verständnis von `keyof` und Lookup-Typen: Die effektive Verwendung von Mapped Types beruht auf einem soliden Verständnis von `keyof` und Lookup-Typen (`T[P]`). Stellen Sie sicher, dass Ihr Team diese grundlegenden Konzepte gut versteht.

Bewährte Verfahren für die Verwendung von Mapped Types

Um das volle Potenzial von Mapped Types auszuschöpfen und gleichzeitig ihre Herausforderungen zu mindern, sollten Sie diese bewährten Verfahren berücksichtigen:

• Einfach anfangen: Beginnen Sie mit einfachen Optionalitäts- und Readonly-Transformationen, bevor Sie in komplexe Schlüssel-Remappings oder bedingte Logik eintauchen.
• Integrierte Hilfstypen nutzen: Machen Sie sich mit den integrierten Hilfstypen von TypeScript wie Partial, Readonly, Record, Pick, Omit und Exclude vertraut. Sie sind oft für gängige Aufgaben ausreichend und gut getestet und verstanden.
• Wiederverwendbare generische Typen erstellen: Kapseln Sie gängige Mapped-Type-Muster in generische Hilfstypen. Dies fördert die Konsistenz und reduziert Boilerplate-Code in Ihrem Projekt und für globale Teams.
• Beschreibende Namen verwenden: Benennen Sie Ihre Mapped Types und generischen Parameter eindeutig, um ihren Zweck anzugeben (z. B. Optional<T>, DeepReadonly<T>, PrefixedKeys<T, Prefix>).
• Lesbarkeit priorisieren: Wenn ein Mapped Type zu kompliziert wird, überlegen Sie, ob es einen einfacheren Weg gibt, das gleiche Ergebnis zu erzielen, oder ob er die zusätzliche Komplexität wert ist. Manchmal ist eine etwas ausführlichere, aber klarere Typdefinition vorzuziehen.
• Komplexe Typen dokumentieren: Fügen Sie für komplizierte Mapped Types JSDoc-Kommentare hinzu, die ihre Funktionalität erläutern, insbesondere wenn Sie Code innerhalb eines vielfältigen internationalen Teams austauschen.
• Ihre Typen testen: Schreiben Sie Typentests oder verwenden Sie Beispiele, um zu überprüfen, ob sich Ihre Mapped Types wie erwartet verhalten. Dies ist besonders wichtig für komplexe Transformationen, bei denen subtile Fehler schwer zu erkennen sein können.

Schlussfolgerung

TypeScript Mapped Types sind ein Eckpfeiler der fortgeschrittenen Typmanipulation und bieten Entwicklern beispiellose Möglichkeiten, Objekttypen zu transformieren und anzupassen. Egal, ob Sie Eigenschaften optional, schreibgeschützt machen, sie umbenennen oder sie basierend auf komplizierten Bedingungen filtern, Mapped Types bieten eine deklarative, typsichere und äusserst ausdrucksstarke Möglichkeit, Ihre Datenstrukturen zu verwalten.

Indem Sie diese Techniken beherrschen, können Sie die Code-Wiederverwendbarkeit erheblich verbessern, die Typsicherheit erhöhen und robustere und wartbarere Anwendungen erstellen. Nutzen Sie die Leistungsfähigkeit von Mapped Types, um Ihre TypeScript-Entwicklung zu verbessern und dazu beizutragen, qualitativ hochwertige Softwarelösungen für ein globales Publikum zu erstellen. Wenn Sie mit Entwicklern aus verschiedenen Regionen zusammenarbeiten, können diese fortgeschrittenen Typmuster als gemeinsame Sprache dienen, um die Codequalität und -konsistenz sicherzustellen und potenzielle Kommunikationslücken durch die Strenge des Typsystems zu überbrücken.